<template>
  <form class="login_container" @submit.prevent="login">
    <div class="account">
      <label for="account">账号:</label>
      <input id="account" type="text" 
        placeholder="请输入用户名" 
        v-model.trim="loginInfo.account" />
    </div>
    <div class="password">
      <label for="password">密码:</label>
      <input id="password" 
        type="password" 
        placeholder="请输入密码" 
        v-model.trim="loginInfo.password"
        autocomplete />
    </div>
    <button class="login" type="submit">登录</button>
  </form>
</template>

<script setup>
import { reactive} from "vue";
import { useRouter } from "vue-router";
  defineEmits(["vnode-unmounted"])
  const router = useRouter()
  const loginInfo = reactive({ account: "", password: "" })
  const login = function () {
    console.log(`loginInfo.account=${loginInfo.account}, loginInfo.password=${loginInfo.password}`)
    if (loginInfo.account && loginInfo.password) {
      console.log("Login Successfully")
      router.push({
        name: "home",
        query: {
          userName: loginInfo.account
        }
      })
    } else {
      console.log("Error account or error password")
      alert("用户名与密码均不能为空")
      Object.assign(loginInfo, { account: "", password: "" })
    }
  }
</script>

<style scoped>
.login_container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#account,
#password {
  width: 300px;
  padding: 0 8px;
  margin-left: 10px;
}

.account {
  display: flex;
  font-size: 24px;
}

.password {
  margin-top: 24px;
  display: flex;
  font-size: 24px;
}

.login {
  margin-top: 20px;
  font-size: 16px;
  padding: 5px 24px;
}
</style>
